<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" th:href="@{/assets/css/colorbox.css}" />
<head th:include="fragments/head::header" />
<style>
	.error {
		color: #F00
	}
</style>
<body>
<div th:include="fragments/top::top"></div>
<div class="main-container" id="main-container">
	<div class="main-container-inner">
		<div th:include="fragments/left::left" class="sidebar" id="sidebar"></div>
		<div class="main-content">
			<div class="breadcrumbs" id="breadcrumbs">
				<ul class="breadcrumb">
					<li><i class="icon-home home-icon"></i> <a href="#">首页</a></li>
					<li><a href="#">系统管理</a></li>
					<li><a href="/role/list">角色列表</a></li>
					<!--<li class="active">内容列表</li>-->
				</ul>
			</div>

			<div class="page-content">
				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<div class="row">
							<div class="col-xs-12">
								<h3 class="header smaller lighter blue">角色列表</h3>
								<div class="table-header">
									<form class="form-inline">
										<div class="form-group">
											<label for="roleName">角色名称：</label>
											<input type="text" id="roleName" class="form-control input-sm" placeholder="" style="width:100px;"/>
										</div>
										<button type="button" id="query" class="btn btn-success ">查询</button>
										<button type="reset" class="btn btn-warning">清空</button>
										<a href="javascript:void(0);" class="btn btn-info pull-right" onclick="toCreateURL()">创建角色</a>
									</form>
								</div>

								<div class="table-responsive">
									<div id="alert" class="alert alert-success" style="display: none;" role="alert">
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<span id="alertText"></span>
									</div>
									<table id="sample-table-2" class="table table-striped table-bordered table-hover">
										<thead>
										<tr>
											<!--<th class="hide">id</th>-->
											<th>角色名称</th>
											<th>操作人</th>
											<th>操作时间</th>
											<th class="hidden-480" width="200px">操作</th>
										</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.page-content -->
		</div>

		<div th:include="fragments/bottom::bottom"></div>
	</div>

	<a href="#" id="btn-scroll-up"
	   class="btn-scroll-up btn btn-sm btn-inverse"> <i
			class="icon-double-angle-up icon-only bigger-110"></i>
	</a>
</div>
<!-- /.main-container -->

<!-- Modal备注 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	 aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content"></div>
	</div>
</div>
<div th:include="fragments/js::js"></div>

<script th:src="@{/assets/js/jquery.validate.min.js}"></script>
<script th:src="@{/assets/js/jquery.validate.zh-CN.js}"></script>
<!-- page specific plugin scripts -->
<script th:src="@{/assets/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/assets/js/jquery.dataTables.bootstrap.js}"></script>
<script th:src="@{/assets/js/temp.js}" charset="UTF-8"></script>
<!--图片查看器-->
<script th:src="@{/assets/js/jquery.colorbox-min.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script type="text/javascript">
    var oTable1;
    jQuery(function($) {
        oTable1 = $('#sample-table-2').dataTable({
            "bFilter" : false,//是否使用搜索
            "bProcessing" : true,
            "bDeferRender" : true,//
            "sPaginationType" : "bs_normal",//分页样式
            "bRetrieve" : true,//是否调用后台
            "bServerSide" : true,//是否以后台分页
            "sAjaxSource" : "/roles",//请求路径
            "fnServerData" : function(sSource, aoData, fnCallback) {
                aoData.push(
                    {"name":"roleName","value":$("#roleName").val()==""?null: $("#roleName").val()}
                )
                $.ajax({
                    "dataType" : 'json',
                    "type" : "GET",
                    "url" : sSource,
                    "data" : aoData,
                    "success" : fnCallback
                });
            },
            "aaSorting" : [ [ 0, "desc" ] ],
			"bSort":true,
            "aoColumns" : [
                {"sClass": "center", "bSortable": false, "mData": "roleName"},
                {"sClass": "center", "bSortable": false,"mData": "operatorNo"},
                {"sClass": "center", "bSortable": false, "mData": "updateTimeString"},
                {"sClass" : "center", "bSortable" : false, "mData" : function (data) {
                    var detail = '<a href="javascript:void(0);" onclick="toDetail(' + data.id + ')" >查看</a>&nbsp;&nbsp;&nbsp;';
                    var edit='<a href="javascript:void(0);" onclick="toEditURL('+data.id+')" >编辑</a>';
					var styleDiv='<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">';
					var check='<a class="blue" href="javascript:void(0);" onclick="toDetail(' + data.id + ')">\n' +
                        '<i class="icon-zoom-in bigger-130"></i></a>\n';
					var editOperation= '<a class="green" href="javascript:void(0);" onclick="toEditURL('+data.id+')">\n' +
                        '<i class="icon-pencil bigger-130"></i></a>\n' ;
					var deleteOperation='<a class="red" href="javascript:void(0);"  onclick="toDeleteURL('+data.id+')">\n' +
                        '<i class="icon-trash bigger-130"></i></a>\n' +
                        '</div>';
                    return styleDiv+check+editOperation+deleteOperation;
                }}
            ],
            "oLanguage" : {
                "sLengthMenu" : "每页 _MENU_条 ",
                "sZeroRecords" : "对不起，查询不到任何相关数据",
                "sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录 ",
                "sInfoEmpty" : "显示 0 到 0 条，共 0 条记录",
                "sInfoFiltered" : "数据表中共为 _MAX_ 条记录)",
                "sProcessing" : "正在加载中...",
                "sSearch" : "搜索",
                "sUrl" : "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
                "oPaginate" : {
                    "sFirst" : "第一页",
                    "sPrevious" : " 上一页 ",
                    "sNext" : " 下一页 ",
                    "sLast" : " 最后一页 "
                }
            }
            //多语言配置

        });


        $("#query").click(function() {
            oTable1.fnDraw();
        })

    })

    function toDetail(id) {
        location.href='/role/detailPage?id=' + id;
    }
    function toEditURL(id){
       location.href='/role/savePage?id=' + id;
	}
	function toCreateURL(){
        location.href='/role/add';
	}
	function toDeleteURL(id){
        parent.layer.confirm('是否执行' + '删除'+ '功能？', {
            icon: 2,
            btn: ['确认', '取消']
            , btn1: function (index, layero) {
                $.ajax({
                    url: "/role/delete",
                    type: "POST",
                    data: {
                        id: id,
                    },
                    success: function (data) {
                        if (data) {
                            layer.confirm( '操作成功！', {
                                icon: 1,
                                btn: ['确认']
                                , btn1: function (index, layero) {
                                    changeTable();
                                    parent.layer.closeAll();
                                }
                            });
                        } else {
                            layer.confirm( '操作失败，请联系管理员！', {
                                icon: 2,
                                btn: ['确认']
                                , btn1: function (index, layero) {
                                    changeTable();
                                    parent.layer.closeAll();
                                }
                            });
                        }
                    }
                });
            }
        });
	};

    function changeTable(){
        oTable1.fnDraw();
	}
</script>
</body>
</html>
